<template>
    <!-- 主题类型：图集# -->
    <div class="list-pics-component-item">
        <a class="list-pics-component-title" :href="info.content.shareUrl">{{info.content.title}}</a>
        <a class="list-pics-component-img" :href="info.content.shareUrl" v-for="(pic,index) in info.content.images"
           v-show="index<3">
            <img v-lazy="addCmdUrl(pic.image,600,100)"/>
            <div class="clearBoth"></div>
        </a>
        <router-link class="list-pics-component-info"
                     :to="{name: 'Index', params: {channelid: info.content.channelId}}">
            <div class="floatL">{{info.content.channelName}}&nbsp;&nbsp;{{this.toCommonTime(info.content.sorttime)}}
            </div>
            <div class="floatR">{{this.simpleNum(info.content.pv)}}看过</div>
            <div class="clearBoth"></div>
        </router-link>
    </div>
</template>

<script>
    export default {
        props: {
            info: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        }
    }
</script>

<style>
    .list-pics-component-item {
        padding: 0.4rem 0;
        margin: 0.4rem auto;
        border-bottom: 0.06rem solid #EDEDED;
        position: relative;
    }

    .list-pics-component-title {
        font-size: 1.0rem;
        line-height: 1.3rem;
        color: #444444;
        overflow: hidden;
        /*font-weight: bold;*/
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: block;
        text-decoration: none;
    }

    .list-pics-component-img {
        width: 32.333%;
        margin: 0.3rem 0.5%;
        padding-bottom: 21.566%;
        float: left;
        position: relative;
    }

    .list-pics-component-img img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
    }

    .list-pics-component-info {
        font-size: 0.5rem;
        color: #999999;
        line-height: 1.1rem;
        display: block;
    }
</style>